<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/index.css">

<style>
	.ban{
	  background-color: #409EFF !important; /* Element UI 的蓝色 */  
  	border-color: #409EFF !important; /* 确保边框也是蓝色 */  
  	color: #FFFFFF !important; /* 文本颜色，根据需要调整 */
	}
    .el-upload-list__item {
        transition: none !important;
    }
    .option-container {
        width: 100%;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 10px; /* 选项之间的间距 */
    }

    .option-card {
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: space-between; /* 水平两端对齐 */
        padding: 10px 20px; /* 内边距 */
        background-color: #ffffff; /* 背景色 */
        border: 1px solid #dddddd; /* 边框 */
        border-radius: 8px; /* 圆角 */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
        transition: background-color 0.3s, box-shadow 0.3s; /* 过渡效果 */
    }

    .option-card input[type="checkbox"] {
        margin-right: 15px; /* 复选框和文本之间的间距 */
    }

    .option-card label {
        font-size: 16px; /* 字体大小 */
        cursor: pointer; /* 鼠标悬停时显示为手形 */
    }

    .option-card:hover {
        background-color: #f0f8ff; /* 悬停时背景色变化 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 悬停时阴影加深 */
    }
</style>

</head>
<body>

<div id="app">
    <el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="类别名称">
              <el-input v-model="type.tname" placeholder="类别名称"></el-input>
            </el-form-item>
            
            <el-form-item label="状态">
              <el-select v-model="type.status" placeholder="权限">
              	<el-option label="所有" value="-1"></el-option>
                <el-option label="下架" value="0"></el-option>
                <el-option label="上架" value="1"></el-option>
              </el-select>
            </el-form-item>
    
            <el-form-item>
              <el-button type="primary" @click="getType(1)">查询</el-button>
            </el-form-item>
          </el-form>

          <!--表格显示-->
          <el-table
          :data="members.records"
          border
          style="width: 100%; margin-top: 40px; min-height: 290px">
          <el-table-column
          align="center"
          label="类别编号"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
          </el-table-column>

              <el-table-column
                      label="题目图片"
                      align="center"
              >
                  <template slot-scope="scope">
                      <img style="width: 80px; height: 80px" v-if="scope.row.image.startsWith('http')" class="i1" :src="scope.row.image">
                      <img style="width: 80px; height: 80px" v-else class="i1" :src="'../../'+scope.row.image">
                  </template>
              </el-table-column>

              <el-table-column
                      align="center"
                      label="父级类别"
              >
                  <template slot-scope="scope">
                      <span>{{ scope.row.tid }}</span>
                  </template>
              </el-table-column>
          
          <el-table-column
          align="center"
          label="类别名称"
          >
          <template slot-scope="scope">
            <span>{{ scope.row.tname }}</span>
          </template>
          </el-table-column>
          
          <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status == 1"
          	size="mini"
          	type="danger"
          	class="ban"
          	@click="down(scope.row)">下架</el-button>
          	<el-button v-if="scope.row.status == 0"
          	size="mini"
          	type="danger"
          	@click="up(scope.row)">上架</el-button>
          </template>
          </el-table-column>
        </el-table>

        <!--页码-->
        <br/>
        <div class="block">
            <span class="demonstration"></span>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[10,20,30,40,50]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </el-card>

        <!--添加类别按钮-->
        <br/>
        <el-button class="bt1" type="success" plain @click="open">添加类别</el-button>
    </el-card>

    <!--添加类别弹框-->
    <el-dialog title="添加类别" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="类别名称">
          <el-input v-model="name" autocomplete="off"></el-input>
        </el-form-item>
          <!--      图片-->
          <el-upload
                  class="upload-demo"
                  action="../../cloud-other/review/upload"
                  :on-change="handleChange"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="true"
                  :on-success="upyes"
                  :on-error="upno"
                  list-type="picture"
                  :limit="1">
              <i slot="trigger" class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <div class="option-container" style="height: 300px;overflow-y: auto">
              <div class="option-card" v-for="t in types">
                  <input type="checkbox" :id="t.id" name="options" :value="t.id" @change="toggleSelection(t.id)">
                  <label :for="t.id">{{t.tname}}</label>
              </div>
          </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="renew">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    
    <!--添加修改弹框-->
    <el-dialog title="修改类别信息" :visible.sync="updateType">
      <el-form>
        <el-form-item label="类别名称">
          <el-input v-model="tname" autocomplete="off"></el-input>
        </el-form-item>
          <!--      图片-->
          <el-upload
                  class="upload-demo"
                  action="../../cloud-other/review/upload"
                  :on-change="handleChange"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="true"
                  :on-success="upyes1"
                  :on-error="upno"
                  list-type="picture"
                  :limit="1">
              <i slot="trigger" class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <el-form-item label="父级编号">
              <el-input v-model="tid" autocomplete="off"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="renew">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
</div>

<script src="../../js/vue.js"></script>
<script src="../../js/axios.js"></script>
<script src="../js/index.js"></script>
<script src="../../js/qs.js"></script>

<script>
  let app = new Vue({
    el: '#app',
    data: {
      type: {
        tname: '',
        status:'-1'
      },
      members: [],
      dialogFormVisible: false,
      updateType: false,
	  name:'',
	  updateData: {},
	  tname:'',
        currentPage4: 1,	//当前所在的页
        total:0,			//总数
        pagesize:10,		//每页数量
        fileList: [], // 存储已选择的文件列表
        pic: '',
        types: [],
        selectedValues: [], // 存储选中的值
        pic1: '',
        tid: ''
    },
    mounted() {
    	
    },
    methods: {
      //打开弹框
      open(){
        this.dialogFormVisible = true;
          this.pic = "";
          this.name = "";
          this.fileList = [];
      },
      //恢复
      renew(){
    	  this.dialogFormVisible = false;
    	  this.updateType = false;
      },
        toggleSelection(value) {
            const index = this.selectedValues.indexOf(value);
            if (index > -1) {
                this.selectedValues.splice(index, 1); // 如果已选中，则移除
            } else {
                this.selectedValues.push(value); // 如果未选中，则添加
            }
        },
      //添加类别
      add(){
    	  if(this.name == null || this.name == ""){
    		  alert("请输入类别名称");
    		  return;
    	  }
          if(this.fileList.length == 0 || this.pic === ''){
              alert("请添加图片");
              return;
          }
          let tid = '';
          if(this.selectedValues.length > 0){
              this.selectedValues.forEach(a=>{
                  tid = tid + a + ",";
              });
          }
          var number = tid.lastIndexOf(",");
          tid = tid.substring(0, number);
          console.info(tid);
          let p = new URLSearchParams;
          p.append("name", this.name);
          p.append("pic", this.pic);
          p.append("tid", tid);
		axios.post("../../cloud-other/type/add", p).then(resp=>{
			if(resp.data.code > 0){
				alert("添加成功");
			}else{
				alert("添加失败");
			}
			this.dialogFormVisible = false;
		});
      },
        //获取类别
        getTypes(){
            axios.get("../../cloud-other/type/getType").then(resp=>{
                this.types = resp.data.data;
            });
        },
      //获取类别
      getType(val) {
          this.currentPage4 = val;
          let p = new URLSearchParams();
          p.append("currentPage4", this.currentPage4);
          p.append("pagesize", this.pagesize);
          p.append("tname", this.type.tname);
          p.append("status", this.type.status);
        axios.post("../../cloud-other/type/gettypeL", p).then(resp=>{
        	this.members = resp.data;
            this.total = this.members.total;
        });
      },
      //编辑查看
      handleEdit(index, obj){
    	  this.updateData = obj;
    	  this.tname = this.updateData.tname;
          this.fileList = [];
          if(this.updateData.image.startsWith("http")){
              this.fileList[0] = {
                  name: '我的头像',
                  url: this.updateData.image
              }
          }else{
              this.fileList[0] = {
                  name: '我的头像',
                  url: "../../" + this.updateData.image
              }
          }
          this.tid = this.updateData.tid;
    	  this.updateType = true;
		},

        //每页展示数据条数的调整
        handleSizeChange(val) {
            //变化每页值的数量
            this.pagesize = val;
            this.getType(1);
        },
        //控制页面的跳转
        handleCurrentChange(val) {
            this.getType(val);
        },
		
	  //修改类别
	  update(){
          if(this.fileList.length == 0){
              alert("请添加图片");
              return;
          }
          let p = new URLSearchParams();
          p.append("id", this.updateData.id);
          p.append("tname", this.tname);
          if(this.pic1 == ''){
              p.append("pic", this.updateData.image);
          }else{
              p.append("pic", this.pic1);
          }
          p.append("tid", this.tid);
			axios.post("../../cloud-other/type/updatetype", p).then(resp=>{
				if(resp.data.code > 0){
					alert("修改成功");
                    this.getType(this.currentPage4);
				}else{
					alert("修改失败");
					this.tname = this.updateData.tname;
				}
				this.updateType = false;
			});
		},
		//下架
	    down(obj){
	    	axios.get("../../cloud-other/type/down?id=" + obj.id).then(resp=>{
	    		if(resp.data.code > 0){
	    			alert("下架类别成功");
	    			//继续条件查询
                    this.getType(this.currentPage4);
	    		}else{
	    			alert("下架类别失败");
	    		}
	    	});
	    },
	    //上架
	    up(obj){
	    	axios.get("../../cloud-other/type/up?id=" + obj.id).then(resp=>{
	    		if(resp.data.code > 0){
	    			alert("上架类别成功");
	    			//继续条件查询
                    this.getType(this.currentPage4);
	    		}else{
	    			alert("上架类别失败");
	    		}
	    	});
	    },
        // 文件上传
        handleChange(file, fileList) {
            // 如果已经选择了文件，则不再允许添加新的文件
            this.fileList = fileList;
            if (this.fileList.length > 1) {
                this.$message.error('只能上传一张图片！');
                // 可以选择移除多余的文件
                this.fileList.splice(1);
            }
            // 如果文件列表中有文件，显示预览
            if (this.fileList.length > 0) {
                this.dialogImageUrl = this.fileList[0].raw ? URL.createObjectURL(this.fileList[0].raw) : this.fileList[0].url;
                this.dialogVisible = true;
            }
        },
        handleRemove(file, fileList) {
            // 移除文件并关闭预览
            this.fileList = fileList.filter(f => f.name !== file.name);
            this.pic = "";
            this.updateQuestion.image = '';
            this.dialogVisible = false;
        },
        //文件上传成功
        upyes(response){
            this.pic = response.data;
        },
        //失败
        upno(err){
            alert("抱歉，请重新上传！");
        },
        upyes1(response){
          this.pic1 = response.data;
        },
    },
	created(){
        this.getTypes();
		this.getType(1);
	}
  });
</script>

</body>
</html>